<template>
  <div>
    <el-card>
      <div slot="header">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>粉丝管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div>
        <el-tabs v-model="activeName" type="card" >
          <el-tab-pane label="粉丝管理" name="first">
            <el-row :gutter="5">
              <el-col :span="3" v-for="item in fansList" :key="item.id.toString()">
                <div class="avator-wrap">
                  <el-avatar :size="70" :src="item.photo" fit="cover"></el-avatar>
                  <p>{{item.name}}</p>
                  <el-button icon="el-icon-plus" type="primary" size="mini" plain @click="item.isFollow = !changeFollow;changeFollow = !changeFollow;">{{item.isFollow ? '已关注' : '关注'}}</el-button>
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="粉丝数据" name="second">配置管理</el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getFans } from '@/api/fans'
export default {
  name: 'FansIndex',
  data() {
    return {
      activeName: 'first',
      fansList: [],
      changeFollow: false
    }
  },
  created() {
    this.loadFans()
  },
  methods: {
    loadFans() {
      getFans().then(res => {
        const results = res.data.data.results
        results.forEach(value => {
          value.isFollow = false
        })
        this.fansList = results
      })
    }
  }
}
</script>
<style lang="less" scoped>
.avator-wrap {
  width: 110px;
  height: 170px;
  border: 1px dotted black;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 12px;
  margin-bottom: 15px;
}
</style>
